<template>
  <view class="my">
    <view class="avatar" @click="onLogin">
      <view style="justify-content: center">
        <u-avatar style="vertical-align: middle" :src="userInfo.avatar"></u-avatar>
        <text class="u-line-1">{{ userInfo.username }}</text>
      </view>
      <u-icon name="arrow-right" color="#d3d3d3" size="32"></u-icon>
    </view>
    <view class="tab">
      <u-grid :col="4" :border="false">
        <u-grid-item>
          <u-icon name="photo" :size="42"></u-icon>
          <view class="grid-text">收藏</view>
        </u-grid-item>
        <u-grid-item>
          <u-icon name="lock" :size="42"></u-icon>
          <view class="grid-text">评论</view>
        </u-grid-item>
        <u-grid-item>
          <u-icon name="hourglass" :size="42"></u-icon>
          <view class="grid-text">我的博文</view>
        </u-grid-item>
        <u-grid-item>
          <u-icon name="hourglass" :size="42"></u-icon>
          <view class="grid-text">我的日志</view>
        </u-grid-item>
      </u-grid>
    </view>
    <u-cell-group>
      <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
      <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
    </u-cell-group>
  </view>
</template>

<script setup lang="ts">
  import { userStore } from '@/store/user'
  import { storeToRefs } from 'pinia'

  const uStore = userStore()
  const { userInfo } = storeToRefs(uStore)
  const onLogin = () => {
    uni.navigateTo({
      url: '/pages/userinfo/index',
    })
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
